<template>
  <div>
    <el-table :data="list" height="640" border style="width: 100%">
      <el-table-column type="index" width="80"></el-table-column>
      <el-table-column prop="itemid" label="爱听歌曲ID" width="120">
      </el-table-column>
      <el-table-column prop="Name" label="歌曲名" width="450">
      </el-table-column>
      <el-table-column prop="Statusid" label="Statusid" :filters="statusIdFilter" :filter-method="filterMethod.bind(this, 'Statusid')"></el-table-column>
      <el-table-column prop="refer_id" label="refer_id" :filters="referIdFilter" :filter-method="filterMethod.bind(this, 'refer_id')"></el-table-column>
    </el-table>
    <el-pagination background layout="total, prev, pager, next, jumper" :total="total" :page-size="ps" @current-change="listMethod">
    </el-pagination>
  </div>
</template>
<script>
import apis from "@utils/apis";

export default {
  data() {
    return {
      pn: 1,
      ps: 1000,
      total: 0,
      list: [],
      statusIdFilter: [{
        text: 404, 
        value: 404,
      },{
        text: 405, 
        value: 405,
      },{
        text: 406, 
        value: 406,
      }],
      referIdFilter: [{
        text: 0, 
        value: 0,
      }],
    }
  },

  components: {

  },

  mounted() {
    this.listMethod()
  },

  methods: {
    listMethod(page, filter) {
      let loading = this.$loading({
        lock: true,
        text: '数据加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.pn = page || 1
      let params = {
        pn: this.pn,
        ps: this.ps,
        source: this.source,
      }
      if(filter) {

      }
      apis.ultSongsApi(params).then(res => {
        loading.close();
        this.total = res.result.total
        this.list = res.result.docs
      })
    },

    filterMethod(type, value, row) {
      return row[type] == value;
    },

  }
}

</script>
